<template>
  <div>
    <!-- prop属性的值 需与数据库字段名一致 -->
    <h2>待审核用户</h2>
    <el-table border :data="currentdata">
      <el-table-column prop="id" label="编号" width="60"></el-table-column>
      <el-table-column prop="user" label="账户名" width="100"></el-table-column>
      <el-table-column prop="user_name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="addr" label="地址"></el-table-column>
      <el-table-column prop="roles" label="角色"></el-table-column>
      <!-- 0:待审核 1:正常 -->
      <el-table-column prop="isTrue" label="状态">
        <template slot-scope="scope">{{scope.row.isTrue=='1' ? '正常':'待审核'}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
         <template slot-scope="scope">
            <!-- <el-button @click="getDetail(scope.row.id)" type="info">详情</el-button> -->
            <el-button @click="changeTrue(scope.row.id,currentpage)" :disabled="scope.row.isTrue=='1'" type="primary">审核</el-button>
         </template>
      </el-table-column>    
    </el-table>
    <!-- 此分页方式要先把所有数据查询出来，当数据量特别大时，不适用（不利于性能优化） -->
    <!-- 分页查询，每页显示7条数据 -->
    <el-pagination v-if="userList" @current-change="handleCurrentChange" background layout="prev, pager, next" :total="userList.length" :page-size="7"></el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: null, //全部数据
      currentdata: null,//分页后显示的当前数据
      currentpage: 1 //当前页
    }
  },
  mounted(){
    //获取全部数据
    this.getList(userList=>{
      this.userList = userList
    })
    //获取分页后的数据
    this.create()
  },
  methods:{
    //得到用户列表
    getList(callback){
      //发送http请求，加载列表
      this.axios.get('/user/unapproved').then(res=>{
         this.userList = res.data
         callback(this.userList)
      })
     
    },
    // //打开详情窗口
    // getDetail(id){
     
    //    this.axios.get(`/user/detail?id=${id}`).then(res=>{
    //     callback(res.data)
    //       console.log(res.data)
    //       let user = res.data
    //       this.$alert(
    //         `<div>iD:${user.id}</div>
    //          <div>用户名:${user.user}</div>`, '用户详情', {
    //       dangerouslyUseHTMLString: true
    //     });
    //   })
    // },
    //审核通过
    changeTrue(id,currentindex){
     let url = `/user/approve?id=${id}`
      this.axios.put(url).then(res=>{
        if(res.data.code ==200){
           this.$message({
            message: '审核操作成功!',
            type: 'success'
           });
           //console.log(res)
           this.getList(userList=>{
            this.userList = userList
             this.currentdata = this.userList.slice((currentindex-1)*7,currentindex*7)
           })
           
        }else{
            this.$message.error('操作失败！');
        }
      }) 
    },
    //分页事件
    handleCurrentChange(currentindex){
      this.currentpage = currentindex
      this.currentdata  = this.userList.slice((currentindex-1)*7, currentindex*7)
    },
    create(){
      //发送http请求，加载列表
      this.axios.get('/user/unapproved').then(res=>{
         this.userList = res.data
         this.currentdata  = this.userList .slice(0, 7)
     })
    }
  }

}
</script>